<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			.left{
				float: left;
			}
			.right{
				float: right;
			}
			.clear:after{
				display: block;
				content: "";
				clear: both;
			}
			
			.box{
				width: 400px;
				height: 500px;
				border: 1px solid red;
				margin: 50px auto;
				position: relative;
			}
			ul{
				list-style: none;
				padding: 0;
				margin: 0;
			}
			ul li{
				height: 40px;
				line-height: 40px;
				padding: 0 10px;
				margin-top:5px;
				background-color: lightseagreen;
			}
			ul li:first-child{
				margin-top: 0;
			}
			.item span{
				display: inline-block;
				width: 40px;
				height: 30px;
				line-height: 30px;
				border: 1px solid blue;
				text-align: center;
				border-radius: 10px;
				color: #fff;
				font-size: 18px;
				cursor: pointer;
			}
			.total{
				width: 390px;
				position: absolute;
				bottom: 0;
				left: 0;
				text-align: right;
				height: 50px;
				line-height: 50px;
				padding-right: 10px;
				background-color: #2582E1;
				color: #fff;
				font-size: 20px;
			}
			.total span{
				display: inline-block;
				color: #FF0000;
				font-size: 24px;
				width: 40px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li class="clear" id="g-1">
					<div class="item right">
						<span class="jian">-</span>
						<span class="num">0</span>
						<span class="jia">+</span>
					</div>
				</li>
				<li class="clear" id="g-2">
					<div class="item right">
						<span class="jian">-</span>
						<span class="num">0</span>
						<span class="jia">+</span>
					</div>
				</li>
				<li class="clear" id="g-3">
					<div class="item right">
						<span class="jian">-</span>
						<span class="num">0</span>
						<span class="jia">+</span>
					</div>
				</li>
				<li class="clear" id="g-4">
					<div class="item right">
						<span class="jian">-</span>
						<span class="num">0</span>
						<span class="jia">+</span>
					</div>
				</li>
				<li class="clear" id="g-5">
					<div class="item right">
						<span class="jian">-</span>
						<span class="num">0</span>
						<span class="jia">+</span>
					</div>
				</li>
				<li class="clear" id="g-6">
					<div class="item right">
						<span class="jian">-</span>
						<span class="num">0</span>
						<span class="jia">+</span>
					</div>
				</li>
				<li class="clear" id="g-7">
					<div class="item right">
						<span class="jian">-</span>
						<span class="num">0</span>
						<span class="jia">+</span>
					</div>
				</li>
				<li class="clear" id="g-8">
					<div class="item right">
						<span class="jian">-</span>
						<span class="num">0</span>
						<span class="jia">+</span>
					</div>
				</li>
				<li class="clear" id="g-9">
					<div class="item right">
						<span class="jian">-</span>
						<span class="num">0</span>
						<span class="jia">+</span>
					</div>
				</li>
				<li class="clear" id="g-10">
					<div class="item right">
						<span class="jian">-</span>
						<span class="num">0</span>
						<span class="jia">+</span>
					</div>
				</li>
			</ul>
			<div class="total">
				已添加 <span>0</span> 件商品
			</div>
		</div>
		
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript">
			
			var countObj = $(".total span");
			var count = countObj.text();
			
			$(".jian").click(function(){
				var numObj = $(this).next("span");
				var num = numObj.text();
				if(num>0){
					num--;
					numObj.text(num);
					count--;
					countObj.text(count);
				}	
			});
			$(".jia").click(function(){
				var numObj = $(this).prev("span");
				var num = numObj.text();
				num++;
				numObj.text(num);
				count++;
				countObj.text(count);
			});
		</script>
		
	</body>
</html>
